<template>
    <section>
        <DetailsHeader title="数据统计" class="mb-24" :showBack="false" />

        <div class="card">
            <a-tabs v-model:activeKey="activeKey" @tabClick="handleClick">
                <a-tab-pane v-for="(item, index) in tabs" :key="item.name" :tab="item.label"></a-tab-pane>
            </a-tabs>
            <component :is="configManageCom.com"></component>
        </div>
    </section>
</template>

<script setup name="DataStatistics">
import { ref, reactive } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import IncomeEchart from './components/IncomeEchart.vue'
import MachineSaleEchart from './components/MachineSaleEchart.vue'
import MachineStableEchart from './components/MachineStableEchart.vue'

const configManageCom = reactive({
    com: IncomeEchart
})
const activeKey = ref('first')
const tabs = [
    { id: 1, label: "收入统计", name: "first", com: IncomeEchart },
    { id: 2, label: "出租率", name: "second", com: MachineSaleEchart },
    { id: 3, label: "机器稳定性", name: "third", com: MachineStableEchart },
]

const handleClick = (tab) => {
    const index = tabs.findIndex(item => {
        return item.name == tab
    })
    configManageCom.com = tabs[index].com
}
</script>

<style scoped lang="scss">
.card {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 4px 0px #E7EDF8;

    .card-content {

        .card-item {
            margin-bottom: 24px;
        }

        .item-label {
            color: #8A93A7;
            text-align: right;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-right: 24px;
        }

        .item-txt {
            color: #223354;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
        }
    }
}
</style>
